    //下面是测试是否可以移动图表的js方法
// (function(){
//     //方法1，交换需要移动的元素的id和class属性，之后再重新执行echarts函数，完成图表的交换
//     var mouseDownId,mouseUpId
       
//     $(document).mousedown(function(e){
//         let id = $(e.target).attr("id")
//         mouseDownId = id
//         console.log("鼠标按下:"+id)
//     })
//     $(document).mouseup(function(e){
//         let id = $(e.target).attr("id")
//         mouseUpId = id
//         console.log("鼠标弹起:"+id)
//         //exchange(mouseDownId,mouseUpId)
//     })

//     function exchange(mouseDownId,mouseUpId){
//         // 为了方便，我让他们两个的id值和class值相同

//         //交换两个元素的class
//         let mouseDownClass = mouseDownId
//         let mouseUpClass = mouseUpId
//         //移除原来的class
//         $("#"+mouseDownId).removeClass(mouseDownClass)
//         //添加新的class
//         $("#"+mouseDownId).addClass(mouseUpClass)
        
//         $("#"+mouseUpId).removeClass(mouseUpClass)
//         $("#"+mouseUpId).addClass(mouseDownClass)


//         //修改id。因为id属性全局唯一，所以要先给一个临时id，等待另一个id值修改之后在修改上面的（类似数组值交换）
//         $("#"+mouseDownId).attr({id:"temp"})
//         $("#"+mouseUpId).attr({id:mouseDownId})
//         $("#temp").attr({id:mouseUpId})

//         //交换完之后再次重新执行图表的渲染
//         leftFirstChartF()
//         leftSecondChartF()
//     }
// })();


(function(){
    //理解append()函数：该函数会把其他子节点添加到目标元素里面的最后面（其实是移动）。而原来地方的子节点则会消失
    // 思路如下：
    //1.要挪动的话，就要挪动<div draggable="true" id="bar/line/pie.." class="panel ~">对应的元素的所有html（包括本身）
    //2.挪动对象也是<div draggable="true" id="bar/line/pie.." class="panel ~">对应的元素的所有html（包括本身）
    //3.为了方便，在每个<div draggable="true" id="bar/line/pie.." class="panel ~">元素的下面新增了一个div。该div什么属性都没有，只是为了方便作为一个整体节点移动。
    //因为使用append方法时，会在父元素里面的末尾处追加子元素。所以使用空的div标签来表示一个子元素
    //下面是移动过程
    //1.当开始拖动的时候，拖动的对象是空div的父元素。通过该父元素获取其子元素空div并赋给draged。
    //2.移动到拖动目标框时，并松掉鼠标，此时触发事件drop，可以获取目标框的元素，使用函数append将draged添加到目标框中。此时目标框中有两个元素，而原本被拖动的框中无元素。
    //3.通过children()[0]获取目标框中的第一个孩子节点，并把它添加到被拖动的框中，从而实现两个框的元素交换。
    //4.由于图表是根据class来进行渲染的。所以最后再把两个父元素的class和id（id也可不交换）进行交换
    
    var draged,dragendparent,targetparent

    document.addEventListener("dragover",function(event){
        event.preventDefault();
    })

    document.addEventListener("dragstart",function(event){
        //dragstart事件只针对含有属性draggable="true"的标签。其他标签不能触发
        console.log("在dragstart中的一些信息如下：")
        //通过父节点获取孩子节点。
        dragendparent = $(event.target).parent()
        draged = $(event.target)
        // console.log(dragendparent)
        // console.log(draged)
    })

    document.addEventListener("dragenter",function(event){
        //所有标签都可以触发此函数
        console.log("dragenter：信息如下")
        console.log(event.target)
        if( $(event.target).attr("draggable") == "true" && event.target.id != dragendparent.attr("id")){
            //如果移动到了指定的可以进入的框，则更改样式，以提醒用户
            console.log("draggable = "+$(event.target).attr("draggable"))
            $(event.target).css({"border":" 2px dotted red"})
        }else{
            //如果移动到了不允许放的框，则还原所有框的样式
            //获取所有含有属性draggable的div元素
            $("div[draggable]").css({"border":" 1px solid rgba(25, 186, 139, 0.17)"})
        }
        
    })

    document.addEventListener("drop",function(event){
        //drop这个事件，他不会根据标签的属性draggable="true"来进行触发函数。
        //而是所有的框都可以触发此事件。
        event.preventDefault();
        console.log("在drop中的一些信息如下：")
        //通过父节点获取孩子节点。
        var target = $(event.target)
        targetparent = $(event.target).parent()
        console.log("$(targetparent)[0]")
        console.log($(targetparent)[0])
        var temp = document.createElement("div")
        $(targetparent)[0].replaceChild(temp,target)
        $(dragendparent)[0].replaceChild(target,draged)
        $(targetparent)[0].replaceChild(draged,temp)

        // console.log(targetparent[0])

        // //这里加上判断，避免拖动到自己本身，或者是框大小不一致的情况（可以利用一些属性的有无来实现）
        // let isdraggable = targetparent.attr("draggable")

        // if(targetparent.attr("id") == dragendparent.attr("id")){
        //     console.log("不能移动到自己本身")
        // }else if(isdraggable != "true"){
        //     console.log("目标框选择错误，无法移动")
        // }else{
        //     console.log("符合条件，进行移动")
        //     exchange(draged,dragendparent,targetparent)
        // }
    })

    function exchange(draged,dragendparent,targetparent){
        
        //将被拖动的元素添加到目标框的元素中
        targetparent.append(draged)
        //添加之后，目标框中有2哥子元素。第一个是原来的，第二个是添加进来的。所以需将第一个子元素添加到被拖动框中（此时被拖动框中无元素）
        //获取目标框中的第一个子元素
        let targetparentFirstChild = targetparent.children()[0]
        //将目标框中的第一个子元素（也是原来的那一个孩子元素）添加到被拖动框中
        dragendparent.append(targetparentFirstChild)

        //下面进行交换两个父元素的id和class。
        exchangeIDAndClass(dragendparent,targetparent)
    }

    function exchangeIDAndClass(dragendparent,targetparent){
        let dragendparentId = dragendparent.attr("id")
        let dragendparentClass = dragendparent.attr("class")
        let targetparentId = targetparent.attr("id")
        let targetparentClass = targetparent.attr("class")
        console.log(dragendparentId+"-"+dragendparentClass+"\n"+targetparentId+"-"+targetparentClass)
        
        //先交换class
        dragendparent.attr({class:targetparentClass})
        targetparent.attr({class:dragendparentClass})
        //在交换id（注意id不可重复，需要借用temp临时变量）
        dragendparent.attr({id:"temp"})
        targetparent.attr({id:dragendparentId})
        dragendparent.attr({id:targetparentId})

        //还原边框样式
        $("div[draggable]").css({"border":" 1px solid rgba(25, 186, 139, 0.17)"})
    }

})();
//上面是测试是否可以移动图表的js方法

(function(){
    
})();